<template>
  <div class="bindPhone">
    <x-header class="header" :left-options="{showBack: showHeaderBack}">手机快速注册</x-header>
    <div class="topHolder"></div>
    <group>
      <x-input title="手机号码" text-align="right" mask="99999999999" v-model="phone" :max="11" placeholder="点击输入"></x-input>
      <x-input title="验证码" v-model="checkCode" :max="6" class="weui-vcode" placeholder="点击输入">
        <x-button slot="right" @click.native="getCheckCode" type="primary" mini v-text="checkCodeText" :show-loading="loadingStatus" :disabled="loadingStatus"> </x-button>
      </x-input>
    </group>
    <box gap="1rem 0.8rem">
      <x-button type="primary" @click.native="submit" :show-loading="loadingStatus" :disabled="loadingStatus" text="快速提交"></x-button>
    </box>
  </div>
</template>

<script>
  import {sendCheckCode,bindPhone} from '../api'
  import { XHeader , Group, Cell, XInput, Box, XButton, cookie  } from 'vux'
  import {message,Trim} from "../common/util";

  export default {
    name:'bindPhone',
    components:{
      XHeader,
      Group,
      Cell,
      XInput,
      Box,
      XButton
    },
    data () {
      return {
        showHeaderBack:this.GLOBAL.showHeaderBack,
        phone:'',
        checkCode:'',
        getCheckCodeStatus:false,
        checkCodeText:' 获取验证码',
        count:60,
        loadingStatus:false
      }
    },
    computed:{
      checkPhone(){//检查手机号正确性
        const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ //正则表达式验证手机号格式
        if (this.phone == '') return '手机号为空'
        if(phoneReg.test(this.phone)) return true
        else return '手机号格式错误'
      },
      checkCheckCode(){//检查验证码正确性
        const checkCodeReg = /^[0-9]{4,6}$/ //判断验证码长度正则表达式，4-6位
        if (this.checkCode == '') return '验证码为空'
        if(checkCodeReg.test(this.checkCode)) return true
        else return '验证码格式错误'
      }
    },
    methods:{
      submit(){
        this.loadingStatus = true
        let phoneResult = this.checkPhone
        let checkCodeResult = this.checkCheckCode
        let reqParams = {
          phone: Trim(this.phone),
          checkCode: this.checkCode,
          openId: sessionStorage.getItem('openid')
        }
        if (!(typeof phoneResult == 'boolean' && phoneResult)){
          message({message: phoneResult,type: 'error'})
          this.loadingStatus = false
        }else{
          if (!(typeof checkCodeResult == 'boolean' && checkCodeResult)){
            message({message: checkCodeResult,type: 'error'})
            this.loadingStatus = false
          }else{
            bindPhone(reqParams).then((res)=>{
              //console.log("bindPhone返回的值：",data)
              let {msg, status, data} = res
              if(status == 'success'){
                this.loadingStatus = false
                sessionStorage.removeItem('needBindPhone');
                sessionStorage.setItem('userid', data);
                this.$router.push({path:'/'})
              }else{
                message({message: msg,type: status})
                this.loadingStatus = false
              }
            }).catch((err)=>{console.log('bindPhone catch info:',err)})
          }
        }
      },
      getCheckCode() {
        let phoneResult = this.checkPhone
        if (!(typeof phoneResult == 'boolean' && phoneResult)){
          message({message:phoneResult,type:'error'})
        }else{
          this.getCheckCodeStatus = true
          sendCheckCode(this.phone).then((res) => {
            //console.log(res)
            this.getCheckCodeStatus = false
            this.countDown()
            if(res.status == 'error') console.log('sendCheckCode error info:',res.msg)
            message({message:res.msg,type:res.status == 'success'?'text':'cancel'})
            this.loadingStatus = false
          }).catch((err)=>{console.log('sendCheckCode catch info:',err)})
        }
      },
      countDown() {
        if (this.count == 0) {
          this.getCheckCodeStatus = false
          this.checkCodeText=" 获取验证码"
          this.count = 60
          return false
        } else {
          this.getCheckCodeStatus = true
          this.checkCodeText=" 重新发送(" + this.count + ")"
          this.count--
        }
        let countDown = this.countDown
        setTimeout(function() {
          countDown();
        },1000);
      }
    },
    mounted(){
      this.$store.commit('updateLoadingStatus',{isLoading:false})
      this.loadingStatus = false
    }
  }
</script>

<style scoped>
  .bindPhone{}
</style>
